<template>
  <div class="EditStore">
    <div class="ele-title"><h4>店铺信息</h4></div>
    <div class="ele-form">
      <el-form ref="forms" :model="BindForm" :rules="pattern">
        <el-form-item label="店铺名称:" prop="shopName" class="item-error">
          <el-col :span="20">
            <el-input
              v-model="BindForm.shopName"
              placeholder="店铺名称"
              maxlength="20"
              style="width:200px"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="店铺地址:" required>
          <el-col :span="3">
            <el-form-item prop="provinceId">
              <el-select
                v-model="BindForm.provinceId"
                prop="provinceId"
                clearable
                filterable
                @change="handelProvince"
              >
                <el-option
                  v-for="(item, index) in pca.province"
                  :key="index"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="cityId">
              <el-select
                v-model="BindForm.cityId"
                clearable
                filterable
                @change="handelCity"
                @clear="handelClearCity"
              >
                <el-option
                  v-for="(item, index) in pca.forCiry"
                  :key="index"
                  :value="item.id"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="areaId">
              <el-select
                v-model="BindForm.areaId"
                clearable
                filterable
                @change="handelArea"
              >
                <el-option
                  v-for="(item, index) in pca.forArea"
                  :key="index"
                  :value="item.id"
                  :label="item.name"
                /> </el-select></el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item prop="details">
              <el-input
                v-model="BindForm.details"
                maxlength="100"
                placeholder="详细地址"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item
          label="店铺管理员:"
          prop="administrators"
          class="item-error"
        >
          <el-col :span="20">
            <el-input
              v-model="BindForm.administrators"
              maxlength="20"
              placeholder=""
              style="width:200px"
            />
          </el-col>
        </el-form-item>
        <!--
        <el-form-item label="服务范围:" prop="test">
          <el-col :span="20">
            <el-input placeholder="" style="width:200px" />
          </el-col>
        </el-form-item>
        <el-form-item label="手机号码:" prop="test">
          <el-col :span="20">
            <div class="ele-xins">
              <el-input placeholder="" style="width:200px" />
              <el-button type="primary" plain>更改</el-button>
              <span class="ele-text">
                更改手机号码后，改店铺管理员同时也会被更改，新修改的手机账户为新的店铺管理员。
              </span>
            </div>
          </el-col>
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            style="width:180px;margin-left:100px"
            :disabled="disabled"
            :loading="butloading"
            @click="handelSubmit"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :visible.sync="visible" center width="500px" :modal="false">
      <p class="ele-dialog-title">
        更改手机号码后，改店铺管理员同时也会被更改，新修改的手机账户为新的店铺管理员。
      </p>
      <p>短信验证码</p>
      <div class="ele-key">
        <el-input placeholder="请输入验证码" />
        <el-button v-if="false" type="primary">获取验证码</el-button>
        <el-button type="primary" plain>60秒后可重码发</el-button>
      </div>
      <div>
        <span>未收到验证码?</span><el-button type="text">电击使用语音验证码</el-button>
        <p>验证码会发送到 123456754523 手机上，请注意查收</p>
      </div>
      <div slot="footer" class="footer">
        <el-button type="primary">确认更改</el-button>
        <el-button>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCityList } from '@/api/auth'
import { shopInformationEdit } from '@/api/customAPI/shop/shopInformation'
// import { Loading } from 'element-ui'
export default {
  name: 'EditStore',
  data() {
    return {
      butloading: false,
      disabled: false,
      // 配送区域
      province: '',
      city: '',
      area: '',
      pCityArea: [],
      pca: {
        // 省区
        province: [],
        // 需要循环遍历的城区和市区
        city: [],
        area: [],
        // 最后拿到的 城区和市区 select 列表
        forCiry: [],
        forArea: []
      },
      pattern: {
        shopName: [
          {
            required: true,
            message: '请输入店铺名',
            trigger: ['blur', 'change']
          }
        ],
        details: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: ['blur', 'change']
          }
        ],
        administrators: [
          {
            required: true,
            message: '请输入管理员',
            trigger: ['blur', 'change']
          }
        ],
        areaId: [
          { required: true, message: '请选择区域', trigger: ['blur', 'change'] }
        ],
        cityId: [
          { required: true, message: '请选择市区', trigger: ['blur', 'change'] }
        ],
        provinceId: [
          { required: true, message: '请选择省区', trigger: ['blur', 'change'] }
        ]
      },
      BindForm: {
        shopName: '',
        provinceId: '',
        cityId: '',
        areaId: '',
        details: '',
        province: '',
        city: '',
        area: '',
        administrators: '',
        shopId: localStorage.getItem('shopId')
      },
      visible: false,
      info: {},
      // 获取市区名称
      provinceName: '',
      cityName: '',
      areaName: '',
      // 区域id
      provinceId: '',
      cityId: '',
      areaId: ''
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.getCitylist()
  },
  activated() {
    this.getCitylist()
  },
  methods: {
    getCitylist() {
      this.butloading = true
      getCityList()
        .then(result => {
          this.pca.province = []
          this.pca.city = []
          this.pca.area = []
          result.data.data.forEach(inf => {
            this.pca.province.push(inf.province)
            inf.cityRegion.forEach(reg => {
              this.pca.city.push(reg.city) // 拿市区
              reg.village.forEach(vil => {
                this.pca.area.push(vil) // 拿城区
              })
            })
          })
          this.provinceCity()
        })
        .catch(err => {
          this.butloading = false
          console.log(err)
        })
    },
    /** 提交 */
    handelSubmit() {
      this.$refs.forms.validate(v => {
        if (v) {
          this.disabled = true
          shopInformationEdit({
            shopName: this.BindForm.shopName,
            shopDetailMessage: {
              provinceId: this.provinceId,
              cityId: this.cityId,
              areaId: this.areaId,
              details: this.BindForm.details,
              province: this.BindForm.province,
              city: this.BindForm.city,
              area: this.BindForm.area
            },
            administrators: this.BindForm.administrators,
            shopId: this.BindForm.shopId
          })
            .then(result => {
              this.disabled = false
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$message.success('编辑成功')
              this.$router.replace({ name: 'ShopInformation' })
            })
            .catch(() => {
              //   this.$message.error(err)
              this.disabled = false
            })
        } else {
          this.disabled = false
        }
      })
    },
    addressName() {
      this.BindForm.details = ''
      this.BindForm.details = this.provinceName + this.cityName + this.areaName
    },
    /** 区 */
    handelArea(v) {
      if (v) {
        this.BindForm.area = this.pca.area.find(inf => {
          return inf.id === v
        }).name
        this.areaName = this.BindForm.area
        /** code */
        this.areaId = this.pca.area.find(inf => {
          return inf.id === v
        }).code
      } else {
        this.areaName = ''
      }
      this.addressName()
    },
    handelClearCity() {
      this.BindForm.areaId = ''
      this.areaName = ''
    },
    /** 市 */
    handelCity(v) {
      this.pca.forArea = []
      this.BindForm.areaId = ''
      this.areaName = ''
      if (v) {
        this.pca.area.forEach(inf => {
          if (inf.pid === v) {
            this.pca.forArea.push(inf)
          }
        })
        this.BindForm.city = this.pca.city.find(inf => {
          return inf.id === v
        }).name
        this.cityName = this.BindForm.city
        /** code */
        this.cityId = this.pca.city.find(inf => {
          return inf.id === v
        }).code
      } else {
        this.cityName = ''
      }
      this.addressName()
    },
    /** 省 */
    handelProvince(v) {
      this.pca.forCiry = []
      this.pca.forArea = []
      this.BindForm.cityId = ''
      this.BindForm.areaId = ''
      this.areaName = ''
      this.cityName = ''
      if (v) {
        this.pca.city.forEach(inf => {
          if (inf.pid === v) {
            this.pca.forCiry.push(inf)
          }
        })
        this.BindForm.details = ''
        this.BindForm.province = this.pca.province.find(inf => {
          return inf.id === v
        }).name
        this.provinceName = this.BindForm.province
        /** code */
        this.provinceId = this.pca.province.find(inf => inf.id === v).code
      } else {
        this.provinceName = ''
      }
      this.addressName()
    },
    /** 修改时初始化 */
    provinceCity() {
      console.log(this.$route.params.row)
      const pidCity = this.pca.city.find(
        inf => inf.code.toString() === this.$route.params.row.cityId.toString()
      ).pid
      const pidArea = this.pca.area.find(
        inf =>
          inf.code.toString() === this.$route.params.row.villageId.toString()
      ).pid
      this.pca.city.forEach(inf => {
        if (inf.pid.toString() === pidCity.toString()) {
          this.pca.forCiry.push(inf)
        }
      })
      this.pca.area.forEach(inf => {
        if (inf.pid.toString() === pidArea.toString()) {
          this.pca.forArea.push(inf)
        }
      })
      this.provinceName = this.$route.params.row.province
      this.BindForm.administrators = this.$route.params.row.concat
      this.BindForm.shopName = this.$route.params.row.busiName
      this.BindForm.provinceId = this.pca.province.find(
        inf =>
          inf.code.toString() === this.$route.params.row.provinceId.toString()
      ).id
      this.BindForm.cityId = this.pca.forCiry.find(
        inf => inf.code.toString() === this.$route.params.row.cityId.toString()
      ).id
      this.BindForm.areaId = this.pca.forArea.find(
        inf =>
          inf.code.toString() === this.$route.params.row.villageId.toString()
      ).id
      this.BindForm.details = this.$route.params.row.address || ''
      this.butloading = false
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('tagsView/delView', from)
    next()
  }
}
</script>

<style lang="scss" scoped>
.EditStore {
  padding: 50px 100px;
  color: black;
  .ele-title {
    height: 50px;
    border-radius: 5px;
    background: #f3f3f3;
    line-height: 50px;
    padding-left: 20px;
  }
  .ele-form {
    margin-top: 40px;
    ::v-deep.el-form {
      .el-form-item__label {
        width: 100px;
        text-align: start;
      }
      .item-error {
        .el-form-item__error {
          margin-left: 100px;
        }
      }
      .el-form-item {
        .el-select {
          margin-right: 15px;
        }
        .ele-xins {
          display: flex;
          align-items: flex-start;
          .el-button {
            margin-left: 10px;
          }
          .ele-text {
            display: inline-block;
            width: 300px;
            margin-left: 60px;
            color: #bbbbbb;
            line-height: 20px;
          }
        }
      }
    }
  }
  ::v-deep.el-dialog {
    .ele-dialog-title {
      color: red;
    }
    .ele-key {
      display: flex;
      justify-content: space-between;
      .el-input {
        width: 280px;
      }
    }
    .footer {
      .el-button {
        width: 150px;
      }
    }
  }
}
</style>
